<template>
	<!-- <u-skeleton rows="20" title rowsHeight="50rpx" :loading="isloading"> -->
	<view class="pageclassa">
		<!-- <scroll-view :scroll-y="scrollyis" style="height: 99vh;" class="goods-scroll" @scroll="boxscroll"
			:scroll-top="scrollIntosas" :enhaced="true" :bounces="false" :upper-threshold="0" :scroll-with-animation="false"> -->
		<scroll-view :scroll-y="scrollyis" class="goods-scroll" :enhanced="true" :bounces="false"
			:show-scrollbar="false" @scroll="boxscroll" scroll-with-animation :scroll-top="scrollIntosas">
			<view class="container">
				<view class="head relative">
					<view class="head-cont"
						:style="[{'height': 32 + 'px', 'padding-top': demoinfo.top + 'px','padding-right': demoinfo.width+15 + 'px'}]">
						<view class="center z-[2]" @click="navback"
							:style="[{'height': 32 + 'px','padding-left':10 + 'px'}]">
							<uv-icon name="arrow-left" color="#fff" size="20"></uv-icon>
						</view>
						<view class="z-[2] flex">
							<view class="center weixin mr-[20rpx]" style="background-color: #D8D8D8;"
								@click="gettoserch">
								<image src="@/static/homeimg/search.svg" mode="aspectFit" class="w-[24rpx] h-[24rpx]">
								</image>
							</view>
							<button open-type="share" plain class="center  weixin"
								style="background-color: #D8D8D8;border: 1px solid #BEBEBE;">
								<view @click="onShareAppMessage" open-type="share">
									<uv-icon name="weixin-fill" color="#1BAB43" size="26"></uv-icon>
								</view>
							</button>
						</view>
					</view>
					<view class="absolute top-[0] left-0 w-[100%] z-[1]">
						<image :src="thumbImg(headtals.logo[0])" mode="aspectFill" class="w-[100%] h-[300rpx]"></image>
					</view>
					<view class="bakcrgb absolute top-[0] left-0 w-[100%] h-[300rpx] z-[1]">

					</view>

				</view>
				<view class="fixed top-0 w-[100%] bg-[#fff] z-[100] left-0 topheight"
					:style="[{'height': demoinfo.top + demoinfo.height+8+'px'}]" v-if="ishowinput">
					<view class="" :style="[{'width':windowWidth-demoinfo.width-20+'px'}]">
						<view class="flex justify-between items-center" :style="[{'margin-top': demoinfo.top+'px'}]">
							<view class="center z-[2]" @click="navback"
								:style="[{'height': 32 + 'px','padding-left':10 + 'px'}]">
								<uv-icon name="arrow-left" color="#000" size="20"></uv-icon>
							</view>
							<view class="serch flex items-center" @click="gettoserch">
								<view class="flex h-[32px] serchcont"
									:style="[{'width':windowWidth-demoinfo.width-100+'px'}]">
									<view class="">
										<image src="@/static/homeimg/search.svg" mode="aspectFit"
											class="w-[24rpx] h-[24rpx]">
										</image>
									</view>
									<view class="ml-[10rpx] text-[28rpx]">
										搜索商品
									</view>
								</view>
							</view>
							<view class="">
								<button open-type="share" plain class="center weixin"
									style="border: 1px solid #F0F0F0;background-color: #fff;overflow: hidden;">
									<view @click="onShareAppMessage" open-type="share">
										<uv-icon name="weixin-fill" color="#1BAB43" size="26"></uv-icon>
									</view>
								</button>
							</view>
						</view>

					</view>

				</view>
				<view class="contentsdf z-[2]">
					<view class="contents-head">
						<view class="logo felx">
							<view class="imglogo">
								<!-- <image class="imgslogo" :src="headtals.businessLicense" mode="aspectFill"></image> -->
								<up-image :show-loading="true" :src="thumbImg(headtals.doorstepPhoto)" radius="10rpx"
									width="110rpx" height="110rpx">
									<template #error>
										<up-image :show-loading="true" :src="errjimg" radius="10rpx" width="110rpx"
											height="110rpx" mode="aspectFit">
										</up-image>
									</template>
								</up-image>
							</view>
							<view class="text-logo">
								<view class="name">
									{{headtals.storeName}}
								</view>
								<view class="time flex">
									<view class="flex">
										<view class="mr-[10rpx] relative top-[2rpx]">
											<image src="@/static/homeimg/time.svg" class="w-[24rpx] h-[24rpx]"
												mode="aspectFit"></image>
										</view>
										<view class="mr-[10rpx] center text-[#393939]">
											配送约 {{headtals.deliverTime}} 分钟<text class="mx-[20rpx]">I</text>
											月售 {{getsanum(headtals.monthSales)}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="shocng">
							<view class="xing" @click="shocang">
								<image
									:src="headtals?.isFlow==1?'/static/homeimg/shocang.svg':'/static/homeimg/quxiao.svg'"
									mode="" class="w-[50rpx] h-[50rpx]"></image>
							</view>
							<view class="xintext">
								{{headtals.flowCount>999?'999+':headtals.flowCount}}人收藏
							</view>
						</view>
					</view>
					<view class="gogao">
						<text
							class="text-[#393939] text-[26rpx] line-clamp-1">公告：{{headtals.storeConfig.notice==''?'暂无公告':headtals.storeConfig.notice}}</text>
					</view>
					<view class="flex mins">
						<view class="huangk w-[100%] items-center flex justify-between">
							<view class="flex  bg-white  pl-[14rpx] text-[32rpx] h-[90rpx] items-center font-[500]">
								<view @click="tabchanges(index)" v-for="(item,index) in listtab" :key="index"
									class="relative mr-[60rpx]">
									<view class="text-[#141516]">
										<view class="relative "
											:class="tabnum == index ? 'text-[#FE861C] font-bold' : ''">
											{{item.name}}
										</view>
										<view class="w-[47rpx] tbas" v-if="tabnum == index">
										</view>
									</view>
								</view>
							</view>
							<view class="u-wrap-tabs-back flex items-center" v-show="ishowinput" @click="toTop">
								<u-icon name="arrow-upward"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="scolls" v-show="tabnum==0">
					<view class="u-menu-wrap"
						:style="[{'height':windowHeight-demoinfo.top-demoinfo.height-topheight + 'px'}]">
						<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
							:scroll-top="scrollTop" :scroll-into-view="itemId">
							<view v-for="(item,index) in tabLists" :key="index" class="u-tab-item"
								:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
								<text class="u-line-1 px-[20rpx]">{{item.goodsCateName}}</text>
							</view>
						</scroll-view>
						<view class="contnerwidth">
							<view class="pl-[20rpx] text-[28rpx] leading-[28rpx] pt-[20rpx] pb-[20rpx] bg-[#fff]">
								{{tabLists[current]?.goodsCateName}}
							</view>
							<!-- 		<scroll-view :scroll-top="scrollRightTop" :scroll-y="ishowinputs" scroll-with-animation
								class="right-box" @scroll.stop="rightScroll"
								:style="{ 'height':windowHeight-demoinfo.top-demoinfo.height-80 + 'px' }"> -->
							<scroll-view :scroll-y="ishowinputs" class="right-box" :enhanced="true" :bounces="false"
								:show-scrollbar="false" @scroll="rightScroll" scroll-with-animation
								:scroll-top="scrollRightTop"
								:style="{ 'height':windowHeight-demoinfo.top-demoinfo.height-80 + 'px' }">
								<view class="page-view  bg-[#fff] pb-[20rpx]">
									<view class="class-item" :id="'item' + index" v-for="(items , index) in tabLists"
										:key="index">
										<view class="mb-[50rpx]" v-for="(item , indexs) in items.goods" :key="indexs">
											<view class="flex goods pt-[5rpx] w-[100%]">
												<view class="goodsimg relative">
													<image class="goodsimg"
														:src="thumbImg(item.goodsImages!==null?item.goodsImages[0]:'')"
														mode="" @click="shopdetals(item)">
													</image>
													<view class="shopdow" v-if="item.goodsStatus==2">
														已下架
													</view>
													<view class="shoko" v-if="item.stockNum==0">
														已售罄
													</view>
												</view>
												<view class="goodstext w-[100%]">
													<view class="">
														<view class="text-head" @click="shopdetals(item)">
															{{item.goodsName}}
														</view>
														<view class="felx mt-[10rpx] salesNum"
															@click="shopdetals(item)">
															<view class="">
																月售
																{{getsanum(item.monthSales)}}
															</view>
															<view class="">
															</view>
														</view>
													</view>
													<view class="salesNum  felx mounys">
														<view class="nummoyneys">
															￥{{item.goodsPrice}}
														</view>
														<view class="flex" v-if="item.specType==1 && item.batching==0">
															<view class="flex"
																v-if="item.stockNum!==0 && item.goodsStatus!==2 && isaddshop()">
																<u-number-box v-model="item.num"
																	@change="changenumdan($event,item)"
																	@overlimit="numsdf" class="flex"
																	:max="item.stockNum" :min="0"
																	:disabled="headtals.distance>headtals.storeConfig.deliveryRatio?true:false">
																	<template #minus>
																		<view class="minus" v-if="item.num>0">
																			<u-icon name="minus" bold color="#FE861C"
																				size="12"></u-icon>
																		</view>
																	</template>
																	<template #input>
																		<text style="text-align: center;"
																			class="input numbershop"
																			v-if="item.num>0">{{item.num}}</text>
																	</template>
																	<template #plus>
																		<view
																			:class="headtals.distance>headtals.storeConfig.deliveryRatio?'plusss':'plus'">
																			<u-icon name="plus" bold color="#FFFFFF"
																				size="12"></u-icon>
																		</view>
																	</template>
																</u-number-box>
															</view>
														</view>
														<view class="" v-else style="position: relative;">
															<!-- <view class=""
																v-if="isaddshop()">
																<view class="addcarsas"
																	v-if="item.stockNum!==0 && item.goodsStatus!==2">
																	选规格
																</view>
															</view> -->
															<view class="" v-if="isaddshop()">
																<view @click="select(item.specType,item.id,item)"
																	class="addcarsa"
																	v-if="item.stockNum!==0 && item.goodsStatus!==2">
																	选规格
																</view>
																<view class=""
																	style="position: absolute;top: -12rpx; right: -15rpx;">
																	<up-badge bg-color="#F12A2A"
																		v-if="results && Object.keys(results).length > 0"
																		type="error" max="99"
																		:value="results[item.id]"></up-badge>
																</view>
															</view>

														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="scollsasas"
					:style="[{'height':windowHeight-demoinfo.top-demoinfo.height-topheight-10 + 'px'}]"
					v-if="tabnum==1">
					<bulisinfo :headtals="headtals" @isprop="isopenprop"></bulisinfo>
				</view>
				<view class="scollsasas"
					:style="[{'height':windowHeight-demoinfo.top-demoinfo.height-topheight-10 + 'px'}]"
					v-if="tabnum==2">
					<Recharge :headtals="headtals"></Recharge>
				</view>
			</view>
		</scroll-view>
		<!-- </u-skeleton> -->
	</view>
	<view class="button" v-if="tabnum==0 && isaddshop()" :style="[{'z-index': showcart?'10075000':'99'}]">
		<view class="flex btinone" @click="opencart">
			<view class="relative" v-if="cartDetails.data < headtals.storeConfig.startDeliveryPrice">
				<image class="imghui" src="@/static/homeimg/huiwm.png" mode=""></image>
				<view class="absolute top-0 right-0 " v-if="cartDetails.list2.length>0">
					<up-badge numberType="overflow" :type="type" max="99" :value="shopnum"></up-badge>
				</view>
			</view>
			<view class="relative" v-if="cartDetails.data >= headtals.storeConfig.startDeliveryPrice">
				<image class="imghui" src="@/static/homeimg/huangwm.png" mode=""></image>
				<view class="absolute top-0 right-0 " v-if="cartDetails.list2.length>0">
					<up-badge numberType="overflow" :type="type" max="99" :value="shopnum"></up-badge>
				</view>
			</view>
			<view class="money">
				<view class="nummoney text-[28rpx] leading-[38rpx]">
					￥<text class="text-[38rpx]">{{cartDetails.data.toFixed(2)}}</text>
				</view>
				<view class="relative bottom-[4rpx]">
					预估加配送费￥{{headtals.storeConfig.deliveryPrice}}元

				</view>
			</view>
		</view>
		<view @click="gobill(cartDetails.data >= headtals.storeConfig.startDeliveryPrice)" class="smallbuton"
			:class="cartDetails.data >= headtals.storeConfig.startDeliveryPrice ? 'smallbuton2':''">
			<view v-if="cartDetails.data >= headtals.storeConfig.startDeliveryPrice">
				去结算
			</view>
			<view class="" v-else>
				￥{{headtals.storeConfig.startDeliveryPrice}} 起送
			</view>
		</view>
	</view>
	<view
		class="fixed bottom-0 w-[100%] h-[140rpx] bg-[#000] opacity-[0.6] px-[50rpx] justify-between flex items-center text-[#fff]"
		v-if="!isaddshop()">
		<view class="text-[40rpx]" :class="headtals.businessStatus==2?'w-[100%] text-center':''">
			{{headtals.businessStatus==1?'无法配送到当前位置':"门店休息中"}}
		</view>
		<view
			class="border-[#fff] border-[1rpx]  h-[66rpx] flex justify-center items-center w-[180rpx] text-[30rpx] rounded-[66rpx]"
			@click="navtos" v-if="headtals.businessStatus==1">
			更换地址
		</view>
	</view>
	<!-- 购物车 -->
	<view class="" v-if="gwclist">
		<u-popup class="popupShow" @touchmove.stop.prevent="" :safeAreaInsetBottom="true" zIndex="1007500"
			v-if="showcart" :closeOnClickOverlay="true" :show="showcart" @close="closecart" @open="cartOpen"
			height="600rpx" :round="20">
			<view class="p-[30rpx]  ">
				<!-- 头部 -->
				<view class="flex  justify-between">
					<view class="flex">
						<view class="">
							已选商品
						</view>
						<view class="text-[24rpx] flex items-end">
							(打包费￥ <text class="text-[red]">{{pagepricenum}}</text>)
						</view>

					</view>
					<view @click="delcart" class="text-[28rpx] text-[#666666]">
						清空购物车
					</view>
				</view>
				<u-divider></u-divider>
				<!-- 购物车列表 -->
				<view class="pb-[40rpx]">
					<scroll-view style="height: 500rpx;" class="pb-[80rpx]" scroll-y="true">
						<view class="" v-for="(item,index) in cartDetails.list2" :key="index">
							<view class="flex">
								<view class="">
									<image class="w-[100rpx] h-[100rpx] rounded-[20rpx]"
										:src="thumbImg(item.goodsImages[0])">
									</image>
								</view>
								<view class="pl-[6rpx] w-[100%]">
									<view class="flex">
										<view class="ml-[20rpx] text-[28rpx] leading-[28rpx]">
											<up-text :text="item.goodsName"></up-text>
										</view>
									</view>
									<view class="pl-[22rpx] salesNum felx justify-between mounys mt-[8rpx] w-[100%]">
										<view>
											<view class="flex flex-nowrap mr-[20rpx]"
												v-if="item.batchingIds!==null || item.weight || item.goodsStock.suk ">
												<view class="text-[24rpx] text-[#999999]">
													<text v-if="item.weight">{{item.weight}}、</text> <text
														v-if="item.batchingIds!==null"><text
															v-for="(item,idnex) in item.batchingIds" :key="index"
															class="mr-[10rpx]">{{ item.batchingName}}</text></text>
													<text v-if="item.goodsStock.suk">{{item.goodsStock.suk}}</text>
												</view>
											</view>
										</view>
									</view>
									<view class="flex justify-between mt-[10rpx] ml-[20rpx]">
										<view class="text-[red]">
											<text class="text-[24rpx]">￥</text>{{item.subtotalPrice}}
										</view>
										<view class="flex items-end">
											<view class="" v-show="item.num>0" @click="cartjian(item,index)">
												<view class="jaddcar">
													<u-icon name="minus" color="#FE861C" size="12"></u-icon>
												</view>
											</view>
											<view class="numbershop" v-if="item.num>0">
												{{item.num}}
											</view>
											<view class="addcar" @click="cartadd(item)">
												<view class="">
													<u-icon name="plus" color="#fff" size="12"></u-icon>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<u-divider lineColor="#efefef"></u-divider>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
	<!-- 选择规格 -->
	<view class="" v-if="skuShows">
		<WuSkus v-model="skuShow" class="popupShow" :data="skus" :defaultNum="defaultNum" :themeColor="[254, 134, 28]"
			btnConfirmText="加入购物车" :defaultCover="imgdang" :specType="specTypedang" :prices='pricedang'
			@numChange="numChange" :batchsprice="batchingId" :stockNum="dangstockNum" notSelectSku="请选择完整的商品信息"
			@skuChange="skuChange" @confirm="confirm">
			<template v-slot:batching>
				<view class="mt-[50rpx] mb-[10rpx]" v-if="bachlist.length>0">
					<view class="text-[30rpx]">配料</view>
					<view class="flex flex-wrap">
						<view class="flex" v-for="(item,index) in bachlist" :key="index"
							:class="havebatch(item)?'boxbachtactive':'boxbacht'" @click="choseback(item)">
							<view class="rightbodr">
								{{item.batchingName}}
							</view>
							<view class="lingsd flex items-center">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</template>
		</WuSkus>

	</view>
</template>
<script setup>
	import {
		thumbImg
	} from "@/utils/Server/imagescale.js"
	import errjimg from "@/static/imagenullerr.jpg"
	import Recharge from "./components/Recharge.vue"
	import bulisinfo from "./components/buliceinfo.vue"
	import WuSkus from "@/components/sku/sku.vue"
	import peison from "@/static/homeimg/peison.svg"
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		ref,
		reactive,
		watch,
		computed,
		nextTick
	} from "vue"
	import {
		useStore
	} from '@/stores/user.js'
	const results = ref({})
	const store = useStore();
	const demoinfo = uni.getMenuButtonBoundingClientRect()
	const windowHeight = uni.getSystemInfoSync().windowHeight //屏幕高度
	const windowWidth = uni.getSystemInfoSync().windowWidth //屏幕高度
	import {
		storeToRefs
	} from 'pinia'
	let {
		userInfo,
		doorinfo,
		lat,
		lng,
	} = storeToRefs(store);
	import {
		storenamedetal,
		bulisliststore,
		applystorestore,
		storebalance,
		storecartdetals,
		storecart,
		gooddetals,
		goodscatelist,
		deleteGoods,
		decreaseGoods,
		goodattr,
		storecollect,
		storecollectnum,
		storevlueuserbills,
		storeconcern,
		vipaccount,
		cancelcollect
	} from "@/api/home.js"
	const typestatus = {
		1: "充值",
		2: "下单支出",
		3: "退款",
		4: "商家扣款",
		5: "商家充值"
	}
	const scrollyis = ref(true)
	const isphoneprop = ref(false)
	const isphonepropopen = () => {
		scrollyis.value = false
		isphoneprop.value = true
	}
	const isphonepropclose = () => {
		scrollyis.value = true
		isphoneprop.value = false
	}
	const isloading = ref(false)
	import {
		onPageScroll,
		onReachBottom,
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
	const heightscoll = ref('')
	//收藏与取消收藏
	const shocang = () => {
		if (headtals.isFlow == 1) {
			uni.showModal({
				title: "收藏",
				content: "您确定取消收藏吗？",
				success: function(res) {
					if (res.confirm) {
						cancelcollect({
							storeId: storeid.value
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									icon: "none",
									title: res.msg
								})
								storedetals()
							} else {
								uni.showToast({
									icon: "none",
									title: res.msg
								})
							}
						})
					}
				}
			})
		} else {
			getshoc()
		}
	}
	const heightnull = ref(400)
	const ishowinput = ref(false)
	const ishowinputs = ref(false)
	const scrollIntosas = ref(0)
	const scoltopnumber = ref(0)

	const boxscroll = (e) => {
		scrollIntosas.value = 1
		scoltopnumber.value = e.detail.scrollTop
		e.stopPropagation()
		if (e.detail.scrollTop > 50) {
			ishowinput.value = true
			ishowinputs.value = true
			gettopheight()
		} else {
			ishowinput.value = false
			ishowinputs.value = false
		}
	}



	const storedetals = () => {
		//门店详情
		storenamedetal({
			storeId: storeid.value,
			lat: store.lat,
			lng: store.lng,
		}).then(res => {
			if (res.code == 200) {
				storeName.value = res.result.name
				deliveryType.value = res.result.storeConfig.deliveryType
				uni.setStorageSync('deliveryType', deliveryType.value)
				Object.assign(headtals, res.result)
				if (headtals.storeConfig.status == 2) {
					listtab.splice(2, 1)
				}
				Object.assign(store.doorinfo, res.result)
			}
		})
	}
	import {
		useAppStore
	} from '@/stores/app.js'
	//跳转商家
	const getdetalbus = (item) => {
		useAppStore().getcategory(item.id, item.deliveryPrice)
	}
	//获取收藏状态和人数
	const shocstatus = reactive({
		CollectNum: 0,
		isCollect: true
	})
	const getshoc = () => {
		storecollect({
			storeId: headtals.id
		}).then(res => {

			if (res.code == 200) {
				storedetals()
			} else {
				uni.showToast({
					icon: "none",
					title: res.msg
				})
			}
		})
	}
	//跳转账单
	let gobill = (e) => {
		 switch(false){
			 case cartDetails.list2.length>0 :
			 uni.showToast({
			 	icon:"none",
				title:'未选择商品'
			 })
			 return;
		 }
		if (e && cartDetails.list2.length>0) {
			uni.navigateTo({
				url: '/page_order/submitanorder/submitanorder?id=' + headtals.id + '&storenName=' + storeName
					.value + '&deliveryType=' + deliveryType.value + '&deliveryPrice=' + deliveryPrice.value
			})
		}
	}
	//去搜索
	const gettoserch = () => {
		uni.navigateTo({
			url: "/pages/index/serch?name=" + headtals.storeName + '&id=' + headtals.id +
				"&startDeliveryPrice=" + headtals.storeConfig.startDeliveryPrice
		})
	}
	//减少购物车商品
	let cartjian = (item, indexs) => {
		if (item.num > 0) {
			item.num--
		}
		if (item.num == 0) {
			cartDetails.list2.forEach((items, index) => {
				if (item.id == items.id && index == indexs) {
					cartDetails.list2.splice(index, 1)
				}
			})
		}
		switch (true) {
			case cartDetails.list2.length < 1:
				delcart()
				return;
		}
		if (cartDetails.list2.length > 0) {
			storecart({
				storeId: headtals.id,
				goods: cartDetails.list2
			}).then(res => {
				if (res.code == 200) {
					cardetaslist()
				}
			})
		}

	}
	//充值跳转
	let gorecharge = () => {
		uni.navigateTo({
			url: '/page_my/recharge/recharge?id=' + headtals.shopId + '&storeName=' + headtals
				.storeName + '&balance=' + chmoneydetals.balance
		})
	}
	import datanull from "@/static/homeimg/datanull.png"
	const upOption = {
		page: {
			size: 10 // 每页数据的数量,默认10
		},
		noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
		empty: {
			top: 200,
			tip: '暂无记录',
			icon: datanull,
		}
	}
	const navtos = () => {
		uni.navigateTo({
			url: "/pages/index/address"
		})
	}
	//弹窗增加购物车
	let cartadd = (item) => {
		item.num++
		item.storeId = headtals.id
		storecart({
			storeId: headtals.id,
			goods: cartDetails.list2
		}).then(res => {
			if (res.code == 200) {
				cardetaslist()
			}
		})
	}
	//跳转商品详情
	const shopdetals = (item) => {
		uni.navigateTo({
			url: "/pages/index/buillsdetals?id=" + item.id + "&storeId=" + item.storeId + "&delivertime=" +
				headtals.deliverTime
		})
	}
	const loglists = ref(false)
	const loglist = ref([])
	onPageScroll((e) => {
		console.log(e, "页面滚动")
	})
	const toTop = () => {
		console.log(scrollyis.value, "是否可以滚动")
		scrollyis.value = true
		scrollIntosas.value = 1
		scrollIntosas.value = 0
	}
	const showcart = ref(false)
	const gwclist = ref(false)
	let opencart = (e) => {
		console.log(ishowinputs.value,"能否滚动")
		if (cartDetails.list2.length > 0) {
			gwclist.value = true
			showcart.value = true
		}
	}
	let closecart = () => {
		showcart.value = false
	}
	const navback = () => {
		uni.switchTab({
			url: "/pages/index/index"
		})
	}
	const headtals = reactive({
		distance: 0,
		monthSales:0,
		storeConfig: {
			notice: "",
			deliveryRatio: ""
		},
		logo: []
	})
	//获取规格
	let skuShow = ref(false)
	let skus = ref([])
	let itemCount = reactive({
		data: []
	})
	//配料
	const bachlist = ref([])
	const specTypedang = ref(0)
	const pricedang = ref(0)
	const dangstockNum = ref(0)
	const imgdang = ref("")
	const skuShows = ref(false)
	const dangweight = ref("")
	let select = (item, id, e) => {
		skuShows.value = true
		batchingId.value = []
		defaultNum.value = 0
		itemCount.data = e
		if (item == 2) {
			gooddetals({
				goodsId: id,
				storeId: storeid.value
			}).then(res => {
				if (res.code == 200) {
					if (res.result.goodsInfo.specType == 2) {
						skus.value = []
						let es = res.result.goodsAttr.length
						res.result.goodsStock.forEach((item, index) => {
							if (es > 1) {
								skus.value.push({
									packagePrice: item.packagePrice,
									id: item.id,
									price: item.price,
									suk: item.suk,
									weight: item.weight,
									unit:item.unit,
									stock: item.stock,
									sku_attrs: {
										[res.result.goodsAttr[0].attrName]: item.skuOne,
										[res.result.goodsAttr[1].attrName]: item.skuTwo
									}
								})
							} else {
								skus.value.push({
									packagePrice: item.packagePrice,
									id: item.id,
									suk: item.suk,
									price: item.price,
									weight: item.weight,
									unit:item.unit,
									stock: item.stock,
									sku_attrs: {
										[res.result.goodsAttr[0].attrName]: item.skuOne
									}
								})
							}

						})
					} else {
						skus.value = []
					}
					bachlist.value = res.result.batchings
					specTypedang.value = res.result.goodsInfo.specType
					pricedang.value = res.result.goodsInfo.goodsPrice
					dangstockNum.value = res.result.goodsInfo.stockNum
					imgdang.value = res.result.goodsInfo.goodsName
					dangweight.value = res.result.goodsInfo.weight
					skuShow.value = true
				}
			})
		} else {
			gooddetals({
				goodsId: id,
				storeId: storeid.value
			}).then(res => {
				if (res.code == 200) {
					skuShow.value = true
					specTypedang.value = res.result.goodsInfo.specType
					pricedang.value = res.result.goodsInfo.goodsPrice
					dangstockNum.value = res.result.goodsInfo.stockNum
					bachlist.value = res.result.batchings
					dangweight.value = res.result.goodsInfo.weight
					imgdang.value = res.result.goodsInfo.goodsName
					if (res.result.goodsInfo.specType == 2) {
						skus.value = []
						let es = res.result.goodsAttr.length
						res.result.goodsStock.forEach((item, index) => {
							if (es > 1) {
								skus.value.push({
									packagePrice: item.packagePrice,
									id: item.id,
									price: item.price,
									stock: item.stockNum,
									weight: item.weight,
									unit:item.unit,
									sku_attrs: {
										[res.result.goodsAttr[0].attrName]: item.skuOne,
										[res.result.goodsAttr[1].attrName]: item.skuOne
									}
								})
							} else {
								skus.value.push({
									packagePrice: item.packagePrice,
									id: item.id,
									price: item.price,
									stock: item.stockNum,
									weight: item.weight,
									unit:item.unit,
									sku_attrs: {
										[res.result.goodsAttr[0].attrName]: item.skuOne
									}
								})
							}

						})
					} else {
						skus.value = []
					}
				}
			})
		}
		setTimeout(() => {
			skuChange()
		}, 100)
	}
	//购买数量
	const defaultNum = ref(0)
	const selectsku = ref({})
	// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
	// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
	let skuChange = (sku) => {
		defaultNum.value = 0
		if (sku) {
			selectsku.value = sku
		}
		if (cartDetails.list2.some((item) => item.id === itemCount.data.id) && specTypedang.value == 2) {
			for (let i = 0; i < cartDetails.list2.length; i++) {
				if (itemCount.data.id == cartDetails.list2[i]?.id && sku?.id == cartDetails.list2[i].goodsStock.id) {
					if (cartDetails.list2[i]?.batchingIds == null) {
						if (batchingId.value.length < 1) {
							defaultNum.value = cartDetails.list2[i].num
							return;
						} else {
							defaultNum.value = 0
						}
					} else {
						if (isEqualArray(cartDetails.list2[i]?.batchingIds, batchingId.value)) {
							defaultNum.value = cartDetails.list2[i].num
							return;
						} else {
							defaultNum.value = 0
						}
					}
				} else {
					defaultNum.value = 0
				}
			}
		} else if (cartDetails.list2.some((item) => item.id === itemCount.data.id) && specTypedang.value == 1) {
			for (let i = 0; i < cartDetails.list2.length; i++) {
				if (cartDetails.list2[i]?.batchingIds == null && batchingId.value.length < 1 && cartDetails
					.list2[i].id == itemCount.data.id) {
					defaultNum.value = cartDetails.list2[i].num
					return;
				} else if (isEqualArray(cartDetails.list2[i]?.batchingIds, batchingId.value) && cartDetails
					.list2[i].id == itemCount.data.id) {
					defaultNum.value = cartDetails.list2[i].num
					return;
				} else {
					defaultNum.value = 0
				}

			}
		} else {
			defaultNum.value = 0
		}

	}
	//选择配料
	const batchingId = ref([])
	const choseback = (item) => {
		let ishabatching = batchingId.value.filter(items => items.batchingId == item.batchingId)
		if (ishabatching.length !== 0) {
			batchingId.value = batchingId.value.filter(items => items.batchingId !== item.batchingId)
		} else {
			batchingId.value.push({
				batchingId: item.batchingId,
				batchingName: item.batchingName,
				price: item.price,
				// stockNum:item.stockNum
			})
		}
		batchingId.value = batchingId.value.sort((a, b) => a.batchingId - b.batchingId);
		skuChange(selectsku.value)
	}
	const numChange = (e) => {
		defaultNum.value = e
	}
	//判断配料是否被选中
	const havebatch = (item) => {
		let ishabatchings = batchingId.value.filter(items => items.batchingId == item.batchingId)
		if (ishabatchings.length > 0) {
			return true
		} else {
			false
		}
	}
	import {
		isEqualArray
	} from "@pureadmin/utils"
	// sku确认事件
	let confirm = (e) => {
		if (!itemCount.data.id) {
			return;
		}
		if (e.num == 0) {
			switch (true) {
				case cartDetails.list2.length == 1:
					cartDetails.list2.forEach((items, index) => {
						if (itemCount.data.id == items.id) {
							delcart()
						}
					})
					return;
				case cartDetails.list2.length !== 1:
					for (let i = 0; i < cartDetails.list2.length; i++) {
						let arr1 = cartDetails.list2[i].batchingIds == null ? [] : cartDetails.list2[i].batchingIds
						let arr2 = batchingId.value
						if (itemCount.data.id == cartDetails.list2[i].id && isEqualArray(arr1, arr2)) {
							cartDetails.list2.splice(i, 1)
							storecart({
								storeId: storeid.value,
								goods: cartDetails.list2
							}).then(res => {
								if (res.code == 200) {
									cardetaslist()
								}
							})
							return;
						}
					}
			}
		} else {
			//获取商品详情
			gooddetals({
				goodsId: itemCount.data.id,
				storeId: storeid.value
			}).then(res => {
				if (res.code == 200) {
					let bachlists = []
					if (batchingId.value.length > 0) {
						bachlists = batchingId.value
					} else {
						bachlists = null
					}
					const goodsInfo = res.result.goodsInfo
					let data = {
						storeId: headtals.id,
						goods: [{
							num: e.num,
							// skuId: e.sku.id,
							storeId: headtals.id,
							id: goodsInfo.id,
							categoryId: goodsInfo.categoryId,
							goodsCateId: goodsInfo.goodsCateId,
							batchingIds: bachlists,
							specType: goodsInfo.specType,
							goodsName: goodsInfo.goodsName,
							packagePrice: goodsInfo.packagePrice,
							content: goodsInfo.content,
							goodsPrice: specTypedang.value == 2 ? e.sku.price : pricedang.value,
							goodsImages: goodsInfo.goodsImages,
							weight: specTypedang.value == 2 ? e.sku.weight : dangweight.value,
							goodsStock: specTypedang.value == 2 ? {
								id: e.sku.id,
								suk: e.sku.suk,
								weight: specTypedang.value == 2 ? e.sku.weight : dangweight
									.value
							} : {}
						}]
					}
					//判断是否已经添加过同样的商品
					switch (true) {
						case cartDetails.list2.length < 1: //购物车无数据
							storecart(data).then(res => {
								if (res.code == 200) {
									cardetaslist()
								}
							})
							return;
						case cartDetails.list2.length > 0: //购物车有数据
							let isadd = ref(false)
							let filteredArr = cartDetails.list2.filter(function(item) { //过滤商品是否有相同的id
								return item.id === goodsInfo.id;
							});
							if (goodsInfo.specType == 2 && filteredArr.length > 0) { //判断商品相同的商品是否为多规格
								let isalltrue = true
								for (let i = 0; i < cartDetails.list2.length; i++) {
									if (cartDetails.list2[i].batchingIds == null && batchingId.value.length ==
										0 && cartDetails.list2[i].id == goodsInfo.id && e.sku.id == cartDetails
										.list2[i].goodsStock.id) {
										cartDetails.list2[i].num = data.goods[0].num
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2,
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											}
										})
										return;
									} else if (isEqualArray(cartDetails.list2[i].batchingIds, batchingId
											.value) && cartDetails.list2[i].id == goodsInfo.id && e.sku.id ==
										cartDetails.list2[i].goodsStock.id) {
										cartDetails.list2[i].num = data.goods[0].num
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2,
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											}
										})
										return;
									} else if (cartDetails.list2[i].id == goodsInfo.id && !isEqualArray(
											cartDetails.list2[i].batchingIds, batchingId.value) && i ==
										cartDetails.list2.length - 1 && e.sku.id == cartDetails.list2[i]
										.goodsStock.id) {
										cartDetails.list2.push(data.goods[0])
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											} else {
												uni.showToast({
													icon: 'none',
													title: res.msg
												})
											}
										})
										return;
									} else if (cartDetails.list2[i].id == goodsInfo.id && !isEqualArray(
											cartDetails.list2[i].batchingIds, batchingId.value) && i ==
										cartDetails.list2.length - 1) {
										cartDetails.list2.push(data.goods[0])
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											} else {
												uni.showToast({
													icon: 'none',
													title: res.msg
												})
											}
										})
										return;
									} else if (cartDetails.list2[i].id == goodsInfo.id && !isEqualArray(
											cartDetails.list2[i].batchingIds, batchingId.value) && i ==
										cartDetails.list2.length - 1) {
										cartDetails.list2.push(data.goods[0])
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											} else {
												uni.showToast({
													icon: 'none',
													title: res.msg
												})
											}
										})
										return;
									} else if (cartDetails.list2[i].id == goodsInfo.id && isEqualArray(
											cartDetails.list2[i].batchingIds, batchingId.value) && i ==
										cartDetails.list2.length - 1 && e.sku.id !== cartDetails.list2[i]
										.goodsStock.id) {
										cartDetails.list2.push(data.goods[0])
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											} else {
												uni.showToast({
													icon: 'none',
													title: res.msg
												})
											}
										})
										return;
									}

								}
							} else if (goodsInfo.specType == 1 && filteredArr.length > 0) {
								for (let i = 0; i < cartDetails.list2.length; i++) {
									if (cartDetails.list2[i].batchingIds == null && batchingId.value.length ==
										0 && cartDetails.list2[i].id == goodsInfo.id) {
										cartDetails.list2[i].num = data.goods[0].num
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2,
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											}
										})
										return;
									} else if (isEqualArray(cartDetails.list2[i].batchingIds, batchingId
											.value) && cartDetails.list2[i].id == goodsInfo.id) {
										cartDetails.list2[i].num = data.goods[0].num
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2,
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											}
										})
										return;
									} else if (cartDetails.list2[i].id == goodsInfo.id && !isEqualArray(
											cartDetails.list2[i].batchingIds, batchingId.value) && i ==
										cartDetails.list2.length - 1) {
										cartDetails.list2.push(data.goods[0])
										storecart({
											storeId: headtals.id,
											goods: cartDetails.list2
										}).then(res => {
											if (res.code == 200) {
												cardetaslist()
											} else {
												uni.showToast({
													icon: 'none',
													title: res.msg
												})
											}
										})
										return;
									}

								}
							} else {
								cartDetails.list2.push(data.goods[0])
								storecart({
									storeId: headtals.id,
									goods: cartDetails.list2
								}).then(res => {
									if (res.code == 200) {
										cardetaslist()
									} else {
										uni.showToast({
											icon: 'none',
											title: res.msg
										})
									}
								})
							}

							return
					}




				}
			})
		}

	}
	const numsdf = () => {
		if (headtals.distance > headtals.storeConfig.deliveryRatio) {
			return
		} else {
			uni.showToast({
				title: "库存不足",
				icon: "none"
			})
		}

	}
	//tab改变 
	const tabnum = ref(0)
	const chmoneydetals = reactive({
		balance: 0,
		id: ""
	})
	const tabchanges = (e) => {
		tabnum.value = e
		if (e == 2) {
			vipaccount({
				shopId: headtals.shopId
			}).then(res => {
				if (res.code == 200) {
					chmoneydetals.balance = res.result.balance
					chmoneydetals.id = res.result.id
				}
			})
		}
	}
	//购物车详情
	let cartDetails = reactive({
		data: 0,
		list: {
			data: []
		},
		list2: []
	})
	//商品数量 
	const shopnum = ref(0)
	const pagepricenum = ref('')
	const cardetaslist = () => {
		storecartdetals({
			storeId: storeid.value
		}).then(res => {
			if (res.code == 200 && res.result.cart !== null) {
				cartDetails.data = res.result.cart.totalAmount
				cartDetails.list = res.result.cart
				cartDetails.list2 = res.result.cart.data
				shopnum.value = 0
				pagepricenum.value = 0
				res.result.cart.data.forEach(item => {
					shopnum.value += item.num
					pagepricenum.value += item.num * item.packagePrice
				})
				results.value = res.result.cart.data.reduce((obj, item) => {
					const {
						id,
						num
					} = item;
					if (obj[id]) {
						obj[id] += num;
					} else {
						obj[id] = num;
					}
					return obj;

				}, {});
				tabLists.value.forEach((itema, index) => {
					itema.goods.forEach((item, index) => {
						cartDetails.list2.forEach(items => {
							let filteredArr = cartDetails.list2.filter(function(
								itemss) { //过滤商品是否有相同的id
								return item.id === itemss.id;
							});
							if (items.id == item.id) {
								item.num = items.num
							} else if (filteredArr.length < 1) {
								item.num = 0
							}
						})
					})
				})
				if (skuShow.value) {
					skuChange(selectsku.value)
				}
			} else {
				cartDetails.data = 0
				cartDetails.list2 = []
				cartDetails.list.data = []
				results.value = {}
				if (tabLists.value.length > 0) {
					tabLists.value.forEach((itema, index) => {
						itema.goods.forEach((item, index) => {
							item.num = 0
						})
					})
				}

			}

		}).catch(err => {
			console.log(err)
		})
	}
	const cartOpen = () => {
		console.log(gwclist.value, "弹窗打开", showcart.value)
		if (!gwclist.value) {
			showcart.value = false
		}
	}
	//清空购物车
	let delCarts = () => {
		console.log('点击');
		uni.showModal({
			title: '温馨提示',
			content: '是否要清空购物车吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					delcart()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	let delcart = () => {
		deleteGoods({
			storeId: storeid.value
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: "购物车已清空",
					icon: 'none'
				})
				results.value = {}
				cardetaslist()
				getcatelist(storeid.value)
				gwclist.value = false
				showcart.value = false
			}
		}).catch(err => {
			console.log("异常", err)
		})
	}
	//加入购物车
	const valuenum = ref(0)
	const changenumdan = (num, item) => {
		if (item.num == 0) {
			jaddshop(item)
		} else {
			addshop(item)
		}

	}
	const addshop = (item) => {
		gooddetals({
			goodsId: item.id,
			storeId: storeid.value
		}).then(res => {
			if (res.code == 200) {
				const goodsInfo = res.result.goodsInfo
				let data = {
					storeId: headtals.id,
					goods: [{
						num: item.num,
						id: goodsInfo.id,
						cateId: goodsInfo.cateId,
						goodsCateId: goodsInfo.goodsCateId,
						specType: goodsInfo.specType,
						batchingIds: null,
						storeId: headtals.id,
						goodsName: goodsInfo.goodsName,
						packagePrice: goodsInfo.packagePrice,
						content: goodsInfo.content,
						goodsPrice: item.goodsPrice,
						goodsImages: goodsInfo.goodsImages,
						weight: goodsInfo.weight
					}]
				}
				if (cartDetails.list2.length < 1) {
					storecart(data).then(res => {
						if (res.code == 200) {
							cardetaslist()
						}
					})
				} else {
					cartDetails.list2.forEach((item, index) => {
						if (item.id == goodsInfo.id) {
							cartDetails.list2.splice(index, 1)
						}
					})
					cartDetails.list2.push(data.goods[0])
					storecart({
						storeId: headtals.id,
						goods: cartDetails.list2
					}).then(res => {
						if (res.code == 200) {
							cardetaslist()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}

			}
		})
	}
	//减少单规格商品
	const jaddshop = (item) => {
		switch (true) {
			case cartDetails.list2.length == 1:
				cartDetails.list2.forEach((items, index) => {
					if (item.id == items.id) {
						items.num--
						if (items.num == 0) {
							delcart()
						} else {
							storecart({
								storeId: storeid.value,
								goods: cartDetails.list2
							}).then(res => {
								if (res.code == 200) {
									cardetaslist()
								}
							})
						}
					}
				})
				return;
			case cartDetails.list2.length !== 1:
				for (let i = 0; i <= cartDetails.list2.length; i++) {
					if (item.id == cartDetails.list2[i].id && item.num == 0) {
						cartDetails.list2.splice(i, 1)
						storecart({
							storeId: storeid.value,
							goods: cartDetails.list2
						}).then(res => {
							if (res.code == 200) {
								cardetaslist()
							}
						})
						return;
					} else if (item.id == cartDetails.list2[i].id && item.num !== 0) {
						cartDetails.list2[i].num--
						storecart({
							storeId: storeid.value,
							goods: cartDetails.list2
						}).then(res => {
							if (res.code == 200) {
								cardetaslist()
							}
						})
						return;

					}
				}

		}
	}
	//子分类
	const tabList = ref([])
	//分类列表 
	const tabLists = ref([{
		childs: null
	}])
	//商品滚动
	onReady(() => {
		setTimeout(() => {
			getMenuItemTop()
		}, 500)
	})
	//商品列表效果参数 
	const current = ref(0) // 预设当前项的值
	const scrollTop = ref(0) // tab标题的滚动条位置
	const oldScrollTop = ref(0)
	const menuHeight = ref(0) //  左边菜单的高度
	const menuItemHeight = ref(0) // 左边菜单item的高度
	const itemId = ref('') // 栏目右边scroll-view用于滚动的id
	const menuItemPos = ref([]) // 左边菜单item的高度
	const arr = ref([]) // 左边菜单item的高度
	const scrollRightTop = ref(0) // 左边菜单item的高度
	const timer = ref(null) // 左边菜单item的高度
	//方法
	// 点击左边的栏目切换
	const swichMenu = (index) => {
		if (scoltopnumber.value < 50) {
			ishowinputs.value = true
		}
		if (arr.value.length == 0) {
			getMenuItemTop();
		}
		if (index == current.value) return;
		scrollRightTop.value = oldScrollTop.value
		nextTick(() => {
			scrollRightTop.value = arr.value[index];
			current.value = index;
			tabCur.value = 0
			leftMenuStatus(index);
		})
	}
	const topheight = ref(88)
	const gettopheight = () => {
		uni.createSelectorQuery().select('.topheight').boundingClientRect(function(rect) {
			// 使用scrollIntoView方法滚动到目标元素
			if (rect !== null) {
				topheight.value = rect.height
			}
		}).exec();
	}
	// 获取一个目标元素的高度
	const getElRect = (elClass, dataVal) => {
		new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery();
			query.select('.' + elClass).fields({
				size: true
			}, res => {
				// 如果节点尚未生成，res值为null，循环调用执行
				if (!res) {
					setTimeout(() => {
						getElRect(elClass);
					}, 10);
					return;
				}
				[dataVal].value = res.height;
				resolve();
			}).exec();
		})
	}
	// 观测元素相交状态
	const observer = () => {
		tabbar.value.map((val, index) => {
			let observer = uni.createIntersectionObserver(this);
			// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
			// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
			observer.relativeTo('.right-box', {
				top: 0
			}).observe('#item' + index, res => {
				if (res.intersectionRatio > 0) {
					let id = res.id.substring(4);
					leftMenuStatus(id);
				}
			})
		})
	}
	// 设置左边菜单的滚动状态
	const leftMenuStatus = (index) => {
		current.value = index;
		if (menuHeight.value == 0 || this.menuItemHeight.value == 0) {
			getElRect('menu-scroll-view', 'menuHeight');
			getElRect('u-tab-item', 'menuItemHeight');
		}
		// 将菜单活动item垂直居中
		scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
		if (scoltopnumber.value < 50) {
			ishowinputs.value = false
		}
	}
	// 获取右边菜单每个item到顶部的距离
	const getMenuItemTop = () => {
		new Promise(resolve => {
			let selectorQuery = uni.createSelectorQuery();
			selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
				// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
				if (!rects.length) {
					setTimeout(() => {
						getMenuItemTop();
					}, 10);
					return;
				}
				rects.forEach((rect) => {
					// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
					arr.value.push((rect.top - rects[0].top).toFixed(2));
					resolve();
				})
			}).exec()
		})
	}
	// 右边菜单滚动
	const rightScroll = (e) => {
		oldScrollTop.value = e.detail.scrollTop;
		if (arr.value.length == 0) {
			getMenuItemTop();
		}
		if (timer.value) return;
		if (!menuHeight.value) {
			getElRect('menu-scroll-view', 'menuHeight');
		}
		setTimeout(() => { // 节流
			timer.value = null;
			// scrollHeight为右边菜单垂直中点位置
			let scrollHeight = e.detail.scrollTop+50 + menuHeight.value / 2;
			for (let i = 0; i < arr.value.length; i++) {
				let height1 = arr.value[i];
				let height2 = arr.value[i + 1];
				// console.log(scrollHeight,height2,"高度",arr.value)
				// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
				console.log("数据",i,scrollHeight,height2,oldScrollTop.value)
				if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
					leftMenuStatus(i);
					return;
				}
			}
		}, 1)
	}
	let storeid = ref()
	let storeName = ref()
	let deliveryType = ref()
	let deliveryPrice = ref()
	onLoad((e) => {
		storeid.value = e.id || e.cq
		if (e.cq > 0) {
			if (uni.getStorageSync('loginTokenKey')) {
				storeconcern({
					storeId: e.cq
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						storedetals()
					} else if (res.code == 201) {
						uni.removeStorageSync('loginTokenKey')
						uni.navigateTo({
							url: "/pages/index/followinterest?id=" + e.cq
						})
					}
				})
				storeid.value = e.cq
				//获取分类列表
				getcatelist(storeid.value)
				//门店详情
				storenamedetal({
					storeId: e.cq,
					lat: store.lat,
					lng: store.lng,
				}).then(res => {
					if (res.code == 200) {
						storeName.value = res.result.name
						deliveryType.value = res.result.storeConfig.deliveryType
						uni.setStorageSync('deliveryType', deliveryType.value)
						Object.assign(headtals, res.result)
						if (headtals.storeConfig.status == 2) {
							listtab.splice(2, 1)
						}
						// getshoc()
						isloading.value = false
						Object.assign(store.doorinfo, res.result)
						cardetaslist()
						if (uni.getStorageSync('loginTokenKey')) {
							applystorestore({
								// businessId: headtals.businessId
								storeId: e.cq,
								shopId: headtals.shopId
							}).then(res => {
								if (res.code == 200) {
									storlist.list = res.result.data
								}
							})
						}

					}
				})
			} else {
				uni.navigateTo({
					url: "/pages/index/followinterest?id=" + e.cq
				})
			}
		} else {
			storeid.value = e.id
			//获取分类列表
			getcatelist(storeid.value)
			deliveryPrice.value = e.deliveryPrice
			//门店详情
			storenamedetal({
				storeId: e.id,
				lat: store.lat,
				lng: store.lng,
			}).then(res => {
				if (res.code == 200) {
					storeName.value = res.result.name
					deliveryType.value = res.result.storeConfig.deliveryType
					uni.setStorageSync('deliveryType', deliveryType.value)
					Object.assign(headtals, res.result)
					if (headtals.storeConfig.status == 2) {
						listtab.splice(2, 1)
					}
					// getshoc()
					Object.assign(store.doorinfo, res.result)
					cardetaslist()
					if (uni.getStorageSync('loginTokenKey')) {
						applystorestore({
							shopId: headtals.shopId
						}).then(res => {
							if (res.code == 200) {
								storlist.list = res.result.data
							}
						})
					}

				}
			})
		}
		//分类列表
		getcatelist(storeid.value)
	})
	const bodyheight = ref(500)
	onShow(() => {
		uni.getSystemInfo({
			success: function(res) {
				bodyheight.value = res.screenHeight - 330
				// console.log("屏幕宽度：" + res.screenWidth);
				// console.log("屏幕高度：" + res.screenHeight);
				// console.log("可使用窗口宽度：" + res.windowWidth);
				// console.log("可使用窗口高度：" + res.windowHeight);
			}
		});
		setTimeout(() => {
			if (headtals.distance < headtals.storeConfig.deliveryRatio) {
				cardetaslist()
			} else {
				getcatelist(storeid.value)
			}
		}, 500)
		if (uni.getStorageSync('loginTokenKey')) {
			setTimeout(() => {
				//获取分类列表
				storenamedetal({
					storeId: storeid.value,
					lat: store.lat,
					lng: store.lng,
				}).then(res => {
					if (res.code == 200) {
						storeName.value = res.result.name
						deliveryType.value = res.result.storeConfig.deliveryType
						uni.setStorageSync('deliveryType', deliveryType.value)
						Object.assign(headtals, res.result)
						if (headtals.storeConfig.status == 2) {
							listtab.splice(2, 1)
						}
						// getshoc()
						Object.assign(store.doorinfo, res.result)
					}
				})
			}, 500)
		}

	})
	//获取商品参数
	const getparmesgoods = ref({
		subCateId: 0,
		goodsCateId: 0
	})
	const ishowtabs = ref(false)
	//商品分类列表 
	const getcatelist = (id) => {
		goodscatelist({
			storeId: id
		}).then(res => {
			if (res.code == 200) {
				tabLists.value = res.result.cateTree
				tabLists.value.forEach(item => {
					item.goods.forEach(items => {
						items.num = 0
					})
				})
				tabList.value = []
				cardetaslist()
			}
		})
	}
	const clickCtTab = (item, index) => {
		// tabCur.value = index
		getshoplist(item, current.value, item.id)

	}
	//已售数量展示
	const getsanum = (e) => {
		switch (true) {
			case e <= 100:
				return e;
			case e <= 1000:
				return parseInt(e / 100)*100 + '+';
			case e <= 10000:
				return parseInt(e / 1000)*1000 + '+';
			case e > 10000:
				return 9999 + '+';
		}
	}
	//商品列表
	const getshoplist = (item, index, sonid) => {
		bulisliststore({
			storeId: storeid.value,
			subCateId: sonid,
			goodsCateId: item.id
		}).then(res => {
			if (res.code == 200) {
				if (res.result.data > 1 && cartDetails.list2.length > 0) {
					let arrs = res.result.data
					arrs.forEach((item, index) => {
						cartDetails.list2.forEach((itemcart,
							index) => {
							if (item.id == itemcart.id) {
								item.num = itemcart.num
							}
						})
					})
					tabLists.value[index].goodslist = arrs

				} else {
					tabLists.value[index].goodslist = res.result.data
				}
				setTimeout(() => {
					arr.value = []
					getMenuItemTop()
					console.log(arr, "000000000")
				}, 1000)
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
				// uni.hideLoading();
			}
		})
	}
	const tabCur = ref(0)
	watch(current, (newname) => {
		tabList.value = []
		ishowtabs.value = false
		if (tabLists.value[newname].childs == null) {
			tabList.value = [{
				goodsCateName: "全部",
				id: 0
			}]
			ishowtabs.value = true
		} else {
			let arrs = JSON.parse(JSON.stringify(tabLists.value[newname].childs))
			tabList.value = arrs
			tabList.value.unshift({
				goodsCateName: "全部",
				id: 0
			})
			ishowtabs.value = true
		}
	})
	const listtab = [{
		name: '商品'
	}, {
		name: '商家',
	}, {
		name: '储值',
	}]
	//适用门店 
	const storlist = reactive({
		list: []
	})
	const buslislist = reactive({
		list: []
	})
	const tabvalue = ref(0)
	onReady(() => {
		// uni.showLoading({
		// 	title: '加载中'
		// })
	})

	//导航
	const gotomap = () => {
		uni.openLocation({
			latitude: Number(headtals.lat), //维度
			longitude: Number(headtals.lng), //经度
			scale: 18, //缩放比例，范围5~18，默认为18
			name: headtals.name,
			address: headtals.place,
		})
	}
	//查看营业执照
	const gotoimg = () => {
		if (headtals.businessLicense == "" || headtals.businessLicense == null) {
			uni.showToast({
				title: "商家暂未上传"
			})
		} else {
			uni.navigateTo({
				url: "/pages/index/anworedimg?url=" + headtals.businessLicense
			})
		}
	}
	//预览图片
	const previewImg = (imgUrlList, index) => {
		console.log(imgUrlList, index)
		let imgsArray = [];
		for (let i = 0; i < imgUrlList.length; i++) {
			if (imgUrlList[i].videoUrl == "") {
				imgsArray.push(imgUrlList[i].imgUrl);
			}
		}
		uni.previewImage({
			current: index,
			urls: imgUrlList,
			longPressActions: {
				// itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					//console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	const makeCall = (e) => {
		uni.makePhoneCall({
			phoneNumber: e,
			success: (res) => {
				console.log('调用成功!')
			},
			fail: (res) => {
				console.log('调用失败!')
			}
		});
	}
	//判断是否可以添加购物车
	const isaddshop = () => {
		if (headtals.businessStatus == 1 && headtals.distance < headtals.storeConfig.deliveryRatio) {
			store.isaddcart = 1
			return true
		} else {
			store.isaddcart = 0
			return false
		}

	}
</script>

<style lang="scss" scoped>
	.boxbachtactive {
		border: 1px solid #FE861C;
		border-radius: 10rpx;
		margin-top: 10rpx;
		color: #FE861C;
		margin-right: 40rpx;
		background-color: #fff4ea;

		.rightbodr {
			padding: 0rpx 14rpx;
			height: 56rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			// white-space: nowrap;
			border-right: 1px solid #FE861C;
		}

		.lingsd {
			// white-space: nowrap;
			font-size: 24rpx;
			padding: 0rpx 14rpx;
			height: 56rpx;
			display: flex;
			align-items: center;
		}
	}

	.boxbacht {
		border: 1px solid #F0F0F0;
		border-radius: 10rpx;
		margin-top: 10rpx;
		margin-right: 40rpx;

		.rightbodr {
			// white-space: nowrap;
			font-size: 24rpx;
			padding: 0rpx 14rpx;
			border-right: 1px solid #F0F0F0;
			height: 56rpx;
			display: flex;
			align-items: center;
		}

		.lingsd {
			// white-space: nowrap;
			font-size: 24rpx;
			padding: 0rpx 14rpx;
			height: 56rpx;
			display: flex;
			align-items: center;
		}
	}

	.salesNum {
		display: flex;
		justify-content: space-between;
	}

	.mounys {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.nummoyneys {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FB2A2A;
	}

	.nummoyneysasd {
		color: #FB2A2A;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.addcar {
		width: 44rpx;
		height: 44rpx;
		background-color: #FE861C;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.addcars {
		width: 44rpx;
		height: 44rpx;
		background-color: #cccccc;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.addcarsa {
		background-color: #FE861C;
		padding: 6rpx 10rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 8rpx;
	}

	.addcarsas {
		background-color: #cccccc;
		padding: 6rpx 10rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 8rpx;
	}

	.jaddcar {
		width: 42rpx;
		height: 42rpx;
		background-color: #fff;
		border: 1px solid #FE861C;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.numbershop {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding: 0 20rpx;
	}

	.home {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		padding: 7rpx 17rpx;
		background: #fff;
		border: 1rpx solid #DBDBDB;
	}

	.home1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF7216;
		padding: 7rpx 19rpx;
		background: #FEEDE2;
	}

	.boderedous {
		border-radius: 20rpx;
	}

	.addmoney {
		justify-content: space-between;

		.addmoneys {
			width: 170rpx;
			height: 64rpx;
			background: #FFE0C5;
			border: 1px solid #FE861C;
			border-radius: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE861C;
		}
	}

	.boderbottom {
		border-bottom: 1px solid #EFEFEF;
	}

	.spsbiwsas {
		height: 106rpx;
		line-height: 106rpx;
		display: flex;
		justify-content: space-between;

		.titlkd {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-left: 10rpx;
			color: #000000;
			white-space: nowrap;
		}

		.spstext {
			font-size: 28rpx;
			color: #393939;
		}
	}

	.busnabottom {
		margin-top: 20rpx;
		padding: 0 20rpx;
		background-color: #fff;
		font-size: 28rpx;
		font-family: PingFang SC;

		.spsbiws {
			// padding: 20rpx 0;
			display: flex;
			align-items: center;

			.titlkd {
				font-size: 28rpx;
				margin-left: 10rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.spstext {
				color: #393939;
			}
		}

		.spsbiw {
			height: 86rpx;
			line-height: 86rpx;
			// border-bottom: 1px solid #EFEFEF;
			display: flex;
			justify-content: space-between;
		}
	}

	.weixin {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		overflow: hidden;
	}

	.busnsimglist {
		background-color: #fff;
		padding: 30rpx 20rpx;
		padding-right: 0;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 32rpx;
		color: #000000;

		.imglsitscoll {
			display: flex;
			flex-wrap: nowrap;
			overflow-x: scroll;
			margin-top: 20rpx;
		}

		.imglists {
			width: 190rpx;
			height: 140rpx;
			border-radius: 5rpx;
			margin-right: 20rpx;
		}
	}

	.busnname {
		margin-top: 10rpx;
		background-color: #fff;
		padding: 30rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 32rpx;
		color: #000000;
		border-bottom: 1px solid #F0F0F0;

		.addres {
			margin: 0 20rpx;
			width: calc(100% - 140rpx);
		}

		.telnuber {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			background-color: #FFF6EE;
			width: 62rpx;
			height: 62rpx;
			border-radius: 50%;
		}
	}

	.scollsasas {
		position: relative;
		// bottom: 56rpx;
		bottom: 66rpx;
	}

	.scollsas {
		position: relative;
		bottom: 56rpx;
	}

	.bujinq {
		display: flex;
		flex-direction: row;
	}

	.goods {
		.goodsimg {
			width: 180rpx;
			height: 180rpx;
			border-radius: 15rpx;
		}

		.goodstext {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #646464;
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.text-head {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 超出几行省略 */
				overflow: hidden;

			}

			.salesNum {
				display: flex;
				justify-content: space-between;
			}

			.mounys {
				display: flex;
				justify-content: space-between;
			}

			.nummoyneys {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FB2A2A;
			}

			.addcar {
				width: 44rpx;
				height: 44rpx;
				background-color: #FE861C;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.addcarsa {
				background-color: #FE861C;
				padding: 6rpx 10rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 8rpx;
			}

			.jaddcar {
				width: 42rpx;
				height: 42rpx;
				background-color: #fff;
				border: 1px solid #FE861C;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.numbershop {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				padding: 0 20rpx;
			}
		}
	}

	.head-title {
		text-align: center;
		margin-top: 100rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0A0A0A;
	}

	.button {
		position: fixed;
		width: calc(100% - 40rpx);
		bottom: 40rpx;
		left: 20rpx;
		z-index: 555;
		height: 98rpx;
		background: #383838;
		border-radius: 49rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.smallbuton {
			margin-right: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background-color: #555555;
			padding: 16rpx 30rpx;
			text-align: center;
			border-radius: 36rpx;

		}

		.smallbuton2 {
			margin-right: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background-color: #FE861C;
			padding: 16rpx 30rpx;
			text-align: center;
			border-radius: 36rpx;

		}

		.btinone {
			padding-left: 40rpx;
		}

		.imghui {
			width: 88rpx;
			height: 66rpx;
		}

		.money {
			padding-left: 24rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.nummoney {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
	}

	.scolls {
		position: relative;
		bottom: 66rpx;
	}

	.mins {
		display: flex;
		justify-content: space-between;
		overflow: hidden;

		.huangk {
			position: relative;
			left: -15rpx;
		}


	}

	.gogao {
		margin-top: 10rpx;
	}

	.serch {
		display: flex;
		font-size: 28rpx;
		line-height: 90rpx;
		color: #959595;

		.serchcont {
			// height: 50rpx;
			background-color: #F0F0F0;
			display: flex;
			align-items: center;
			padding: 0rpx 32rpx;
			border-radius: 30rpx;
			justify-content: left;
		}
	}

	.boderred {
		width: 360rpx;
		border: 1px solid #FF2626;
		height: 36rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #FF2626;

		.smalltext {
			background-color: #FF2626;
			line-height: 36rpx;
			color: #fff;
			padding: 0 5rpx;
		}

		.textsm {
			padding: 0 15rpx;
		}
	}

	.contentsdf {
		background-color: #fff;
		padding: 30rpx 20rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: relative;
		bottom: 66rpx;
		padding-bottom: 0;
		border-bottom: 1rpx solid #f9f9f9;

		.contents-head {
			position: relative;

			.xintext {
				position: absolute;
				top: 90rpx;
				width: 150rpx;
				text-align: center;
				text-indent: 10rpx;
				font-size: 24rpx;
				right: -25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.shocng {
				position: absolute;
				right: 0;
				top: -80rpx;
				right: 20rpx;

				.xing {
					background-color: #fff;
					border-radius: 50%;
					padding: 22rpx;
				}
			}
		}

		.text-logo {
			margin-left: 20rpx;

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.time {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #393939;
				margin-top: 20rpx;
			}
		}

		.logo {
			display: flex;

			.imgslogo {
				width: 110rpx;
				height: 110rpx;
				border-radius: 10rpx;
			}
		}

	}

	.bakcrgb {
		background: #262626;
		opacity: 0.3;
	}

	.head {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		// background: url('@/static/homeimg/bgc.png') no-repeat;

		// background-size: 100% 100%;
		.head-cont {
			display: flex;
			// width: calc(100% - 245rpx);
			// padding-left: ;
			// padding-top: 100rpx;
			// padding-left: 40rpx;
			// padding-right: 205rpx;
			justify-content: space-between;
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.blod500 {
		font-weight: 500;
	}

	.shopdow {
		background: rgba(35, 35, 35, 0.6);
		border-radius: 3px;
		position: absolute;
		top: 0;
		width: 95px;
		height: 85px;
		color: #fff;
		font-size: 14px;
		text-align: center;
		line-height: 85px;
	}

	.shoko {
		background-color: rgba(253, 241, 231, 0.9);
		width: 50px;
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		position: absolute;
		text-align: center;
		border-radius: 5rpx;
		color: #FE861C;
		top: 0;
	}
</style>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.item-title {
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.item {
		padding: 10rpx 20rpx;

		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}

		&-content {
			padding: 20rpx 0;

			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
	}

	.ovscloll {
		height: calc(99vh - 680rpx);
		overflow: hidden;
		background-color: #fff;
		overflow: scroll;
	}

	.gap {
		padding: 0 30rpx;
	}

	.tbas {
		height: 8rpx;
		position: absolute;
		bottom: -24rpx;
		left: 10rpx;
		background-color: #FE861C;
		border-radius: 4px 4px 0 0;
	}

	.tabs {
		border: 1px solid #FE861C;
	}

	.tabss {
		background-color: #FE861C;
	}

	.borderbototm {
		border-bottom: 1px solid #efefef;
	}

	::v-deep .u-safe-bottom {
		padding-bottom: 0;
	}

	::v-deep .uv-vtabs__bar-item {
		padding: 17px 6px !important;
	}

	.carnumer {
		padding: 8rpx;
		background: #F12A2A;
		// border-radius: 50%;
		font-size: 22rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	::v-deep .u-badge--error.data-v-06cca9b7 {
		background-color: #F12A2A;
	}

	.xiala {
		width: calc(100% - 100px);
		overflow: hidden;
		background-color: #fff;
	}

	.sonclass2 {
		width: calc(100% - 100px);
		display: flex;
		padding: 20rpx;
		align-items: center;
		overflow-x: scroll;
	}

	.sonclass1 {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sonclass {
		width: calc(100% - 176rpx);
		// overflow: hidden;
		width: 100%;
		display: flex;
		// padding-left: 20rpx;
		height: 100rpx;
		background-color: #F9F9F9;
		align-items: center;
		// overflow-x: scroll;
	}

	.popupShow {
		height: 99vh;
	}
</style>
<style lang="scss" scoped>
	.u-wrap {
		height: 99vh;
		/* #ifdef H5 */
		height: calc(99vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 176rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 90rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #333333;
		font-weight: 400;
		line-height: 40rpx;

	}

	.u-tab-item-active {
		position: relative;
		color: #FE861C;
		font-size: 26rpx;
		line-height: 40rpx;
		font-weight: bold;
		line-height: 26rpx;
		background: #fff;
	}

	// .u-tab-item-active::before {
	// 	content: "";
	// 	position: absolute;
	// 	border-left: 4px solid $u-primary;
	// 	height: 32rpx;
	// 	left: 0;
	// 	top: 39rpx;
	// }

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		// padding: 16rpx;
	}

	.class-item {
		// margin-bottom: 30rpx;
		background-color: #fff;
		padding: 0rpx 20rpx;
		border-radius: 8rpx;
	}

	.class-item:last-child {
		min-height: 92vh;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}

	.contnerwidth {
		width: calc(100% - 176rpx);
	}

	.container {
		overflow-y: scroll;
	}

	::v-deep .mescroll-empty {
		box-sizing: border-box;
		width: 100%;
		padding: 3.125rem 1.5625rem;
		text-align: center;
		position: relative;
		top: 150rpx;
	}

	.pageclassa {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		height: 99vh;
		overflow: hidden;
	}

	.goods-scroll {
		height: 99vh;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #FE861C;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 20rpx;
	}

	.plusss {
		width: 22px;
		height: 22px;
		background-color: #cccccc;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FE861C;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>